<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib uri="http://tiles.apache.org/tags-tiles" prefix="tiles"%>
<%@ taglib uri="http://struts.apache.org/tags-html" prefix="html"%>
<%@ taglib uri="http://struts.apache.org/tags-bean" prefix="bean"%>
<%@ taglib uri="http://struts.apache.org/tags-logic" prefix="logic"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Change Password</title>
<script src="references/js/jquery-2.1.0.min.js"></script>

<script type="text/javascript">
	//Image Hover
	jQuery(document)
			.ready(
					function() {
						jQuery(function() {
							
							jQuery("#oldPassword").attr("required", "");
							jQuery("#oldPassword").attr("placeholder", "Old Password");
							jQuery("#password5").attr("placeholder", "New Password");
							jQuery("#password5").attr("required", "");
						
						});
						
					});
</script>


<script>

	function checkPass1() {
		//Store the password field objects into variables ...
		var pass1 = document.getElementById('password5');
		var pass2 = document.getElementById('re-password5');
		//Store the Confimation Message Object ...
		var message = document.getElementById('confirmMessage2');
		//Set the colors we will be using ...
		var goodColor = "#66cc66";
		var badColor = "#ff6666";
		//Compare the values in the password field 
		//and the confirmation field
		if (pass1.value == pass2.value) {
			//The passwords match. 
			//Set the color to the good color and inform
			//the user that they have entered the correct password 
			pass2.style.backgroundColor = goodColor;
			message.style.color = goodColor;
			message.innerHTML = "Passwords Match!"
			return true;
		} else {
			//The passwords do not match.
			//Set the color to the bad color and
			//notify the user.
			pass2.style.backgroundColor = badColor;
			message.style.color = badColor;
			message.innerHTML = "Passwords Do Not Match!"
			return false;
		}
	}
</script>
</head>
<body>
	<tiles:insertTemplate template="/pages/masterpage/masterPage.jsp">

		<tiles:putAttribute name="body">
		
			<logic:empty name="username" scope="session">
				<logic:forward name="home" />
			</logic:empty>



			
		
		
			
				
			


		
			
			
			<div id="loginbox" style="margin-top:50px;" class="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2">   
			<div class="panel panel-info">
                    <div class="panel-heading">
                        <div class="panel-title">Change Password</div>
                    </div>     

                    <div style="padding-top:30px" class="panel-body">

                        <div style="display:none" id="login-alert" class="alert alert-danger col-sm-12"></div>
                        
                            <html:form action="/changePassword" method="post"
				onsubmit="return checkPass1();"  styleClass="form-horizontal">
                       
                                    
                            <div style="margin-bottom: 25px" class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-resize-full"></i></span>
                                        
                                        <html:password property="oldPassword"
					styleId="oldPassword" styleClass="form-control"></html:password>                                    
                                    </div>
                                
                            <div style="margin-bottom: 25px" class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                                        <html:password  styleClass="form-control" property="newPassword" styleId="password5"></html:password>
                                              </div>
                                    
 <div style="margin-bottom: 25px" class="input-group">
                                        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
                                       <input type="password" class="form-control" id="re-password5" required
					onkeyup="checkPass1(); return false;" placeholder="Confirm password" />
                                              </div>
                                    
                                
                         


                                <div style="margin-top:10px" class="form-group">
                                    <!-- Button -->

                                    <div class="col-sm-12 controls">
                                    	<html:submit styleClass="btn btn-success">Change</html:submit>
                                    	<br>
                                    		<span id="confirmMessage2" class="confirmMessage"></span>
			<logic:notEmpty name="info">
				<bean:write name="info" />
				<br>
			</logic:notEmpty>
                               
                                    </div>
                                </div>


                             
                        </html:form>   



                        </div></div>                     
                    </div>
			
		</tiles:putAttribute>
	</tiles:insertTemplate>
</body>
</html>